<template>
  <div class="message">
    <div class="title-msg">消息管理</div>

    <div class="option-site">
      <div class="option-site-head"><span>消息列表</span></div>
      <div class="option-site-neck">
        <Neck :username="messageListAndRecordInfo.user_username"
              :handle="messageListAndRecordInfo.handle"
              @screen="mScreen"
              @search="mSearch"></Neck>
      </div>

      <div class="option-site-table">
        <Table :list="messageListAndRecordInfo.page.list"
               @delete="mDelete"></Table>
        <Footer :count="messageListAndRecordInfo.page.count"
                :total="messageListAndRecordInfo.page.total"
                :index="messageListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext"></Footer>
      </div>

      </div>
  </div>
</template>

<script>
  import {getMessageList} from 'network/admin'
  import {deleteMessage} from 'network/mix'

  import Footer from "./childComps/Footer";
  import Neck from "./childComps/Neck";
  import Table from "./childComps/Table";

  export default {
    name: "Message",
    components: {
      Footer,
      Neck,
      Table
    },
    data() {
      return {
        messageListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          user_username: '',
          handle: 0
        }
      }
    },
    mounted() {
      this.mGetMessageList()
    },
    methods: {

      /**axios网络请求*/
      mScreen({un, ha}) { // 筛选商品类目
        getMessageList(un, ha, 1)
          .then(result => {
            this.messageListAndRecordInfo = result;

            this.$bus.$emit('messageBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              un: un,
              ha: ha,
            })
          })
          .catch(error => {
            console.log('筛选消息失败' + error);
          })
      },
      mSearch({un, ha}) {
        getMessageList(un, ha, 1)
          .then(result => {
            this.messageListAndRecordInfo = result;

            this.$bus.$emit('messageBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              un: un,
              ha: ha,
            })
          })
          .catch(error => {
            console.log('搜索消息列表失败' + error);
          })
      },
      mGetMessageList() { // 首次加载获取消息列表
        getMessageList('', 0, 1)
          .then(res => {
            this.messageListAndRecordInfo = res
            // console.log(this.messageListAndRecordInfo);
          })
        .catch(error => {
          console.log('获取消息列表失败！！！' + error);
        })
      },

      mPre({un, ha, i}) { // 点击上一页触发的网络请求
        getMessageList(un, ha, i - 1)
          .then(res => {
            this.messageListAndRecordInfo = res;
            // console.log(this.messageListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取上一页消息列表失败' + error);
          })
      },
      mNext({un, ha, i}) { // 点击下一页触发的网络请求
        getMessageList(un, ha, i + 1)
          .then(res => {
            this.messageListAndRecordInfo = res;
            // console.log(this.messageListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取下一页消息列表失败' + error);
          })
      },

      mDelete({id}) { // 通过消息id删除消息
        deleteMessage(id) // 调用删除消息的方法
         .then(res => {
            console.log(res);
            // this.reload(); // 刷新当前页面
            this.$router.go(0) // 使用该方法也可以刷新当前页面
            this.$succ_ty_toast.toShow('删除消息' + id + '成果', 5000);
          })
          .catch(err => {
            console.log(err);
            this.$err_ty_toast.toShow('删除id为' + id + '的消息失败！！！', 2000);
          })
      }
    }
  }
</script>

<style scoped>
  .message {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: green;

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }
  /*.option-site-neck select {*/
  /*  width: 100px;*/
  /*  height: 30px;*/
  /*  margin-right: 20px;*/

  /*  border-radius: 4px;*/
  /*  border: 1px solid #cdcdcd;*/
  /*  background-color: #fff;*/
  /*}*/
  /*.option-site-neck .screen-btn {*/
  /*  height: 30px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*  background-color: #007bff;*/
  /*}*/
  /*.option-site-neck .screen-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .search-text {*/
  /*  width: 200px;*/
  /*  height: 28px;*/
  /*  transform: translateX(120px);*/
  /*}*/
  /*.option-site-neck .search-btn {*/
  /*  height: 32px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #007bff;*/
  /*  transform: translateX(130px);*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .search-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .add-btn {*/
  /*  transform: translateX(435px);*/

  /*  height: 30px;*/
  /*  width: 80px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #28a745;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .add-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }
</style>